<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>迪了个迪</title>
    <!-- 引入外部CSS -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 class="game-header">羊了个羊</h1>
    
    <!-- 游戏信息栏 -->
    <div class="game-info-bar">
        <div class="info-panel">剩余卡片：<span id="left-count">0</span></div>
        <div class="help-button" id="help-btn">❓</div>
    </div>

    <!-- 游戏说明面板 -->
    <div class="tutorial-panel" id="tutorial-panel">
        <div class="tutorial-content">
            <h2>游戏玩法</h2>
            <div class="close-btn" id="close-tutorial">×</div>
            <div class="tutorial-steps">
                <div class="step">
                    <div class="step-number">1</div>
                    <div class="step-text">点击未被遮挡的卡片，将其放入下方槽中</div>
                </div>
                <div class="step">
                    <div class="step-number">2</div>
                    <div class="step-text">收集3个相同的图案可以消除</div>
                </div>
                <div class="step">
                    <div class="step-number">3</div>
                    <div class="step-text">槽位最多容纳7张卡片，超出则游戏失败</div>
                </div>
                <div class="step">
                    <div class="step-number">4</div>
                    <div class="step-text">消除所有卡片即可通关</div>
                </div>
            </div>
            <div class="scoring-rules">
                <h3>得分规则</h3>
                <ul>
                    <li>消除一组：+10分</li>
                    <li>额外卡片：+5分/张</li>
                    <li>通关奖励：+100分</li>
                </ul>
            </div>
        </div>
    </div>
    
    <!-- 积分面板 -->
    <div class="score-panel">
        <div>当前得分</div>
        <div class="score-value" id="current-score">0</div>
        <div>最佳记录</div>
        <div class="score-value" id="best-score">0</div>
    </div>

    <!-- 排行榜 -->
    <div class="leaderboard">
        <h2>排行榜</h2>
        <ul class="leaderboard-list" id="leaderboard-list">
            <!-- 排行榜项目将通过JavaScript动态添加 -->
        </ul>
    </div>

    <div class="play-area"></div>
    <div class="selection-bar">
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
    </div>
    <!-- 音乐按钮 -->
    <div class="circle-button" id="play-pause-btn">🎵</div>
    <!-- 添加背景音乐 -->
    <audio id="background-music" loop>
        <source src='./ylgy.mp3' type="audio/mpeg" />
    </audio>
    <!-- 引入外部JavaScript -->
    <script src="script.js"></script>
</body>
</html>